<template>
	<view class="body" id="container">
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
			</view>
			<view class="head_mid" v-text="item"></view>
			<view class="head_right">
				<image src="../../../static/jingyou/translate.png" mode=""></image>
				<image src="../../../static/jingyou/more.png" mode=""></image>
			</view>
		</view>
		<view class="body_item">
			<!--对方发的名片-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="otherTalk">
					<view class="head_box">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<image class="country" src="../../../static/meiguo.png" mode=""></image>
					</view>
					<view class="item_box1">
						<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_Inputbox.png" mode=""></image>
						<!-- <view class="talk_item wenzi">
								嗨，很高兴认识你。
							</view> -->
						<view class="mingpian">
							<view class="mingpian_top">
								<image src="../../../static/avatar.jpg" mode=""></image>
								<text>一个棒棒糖笑嘻嘻</text>
							</view>
							<view class="mingpian_bottom">[个人名片]</view>
						</view>
					</view>
				</view>
			</view>
			<!--我发送的名片-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="meTalk">
					<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
					<view class="item_box2">
						<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_i.png" mode=""></image>
						<!-- 名片 -->
						<view class="mingpian">
							<view class="mingpian_top">
								<image src="../../../static/avatar.jpg" mode=""></image>
								<text>一个棒棒糖笑嘻嘻</text>
							</view>
							<view class="mingpian_bottom">[个人名片]</view>
						</view>
					</view>
				</view>
			</view>
			<!--我发送的语音-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="meTalk">
					<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
					<view class="item_box2">
						<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_i.png" mode=""></image>
						<image class="voice-size active" src="../../../static/jingyou/aiuto.png"></image>
					</view>
					<view class="duration active">54''</view>
				</view>

			</view>
			<!--对方发的语音-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="otherTalk">
					<view class="head_box">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<image class="country" src="../../../static/meiguo.png" mode=""></image>
					</view>
					<view class="item_box1">
						<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_Inputbox.png" mode=""></image>
						<image class="voice-size" src="../../../static/jingyou/aiuto.png"></image>
						<view class="unread"></view>
					</view>
					<view class="duration">54''</view>
				</view>
			</view>
			<!--我发的图片-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="meTalk">
					<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
					<image class="sendImg-me" src="../../../static/avatar.jpg"></image>
				</view>

			</view>
			<!--对方发的图片-->
			<view>
				<view class="time">
					12-13 17:31
				</view>
				<view class="otherTalk">
					<view class="head_box">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<image class="country" src="../../../static/meiguo.png" mode=""></image>
					</view>
					<image class="sendImg-me" src="../../../static/avatar.jpg"></image>
				</view>
			</view>

			<view v-for="(item,index) in meTextMsg" :key="index">
				<!--我发送的文本消息-->
				<view v-if="item.fromAccount == user_id">
					<view class="time" v-text="item.time">
						<!-- 昨天 17:31 -->
					</view>
					<view class="meTalk">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<view class="item_box2">
							<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_i.png" mode=""></image>
							<!-- 文字 -->
							<view class="talk_item" v-text="item.text">
								<!-- 嗨，很高兴认识你。 -->
							</view>
						</view>
					</view>
				</view>
				<!--对方发送的文本消息-->
				<view v-else>
					<view class="time" v-text="item.time"></view>
					<view class="otherTalk">
						<view class="head_box">
							<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
							<image class="country" src="../../../static/meiguo.png" mode=""></image>
						</view>
						<view class="item_box1">
							<image class="xiaojiao" src="../../../static/jingyou/Inputbox_icon_Inputbox.png" mode=""></image>
							<view class="talk_item wenzi" v-text="item.text"></view>
						</view>
					</view>
				</view>
			</view>

			<view v-for="(item,index) in otherTextMsg" :key="index">

			</view>

		</view>
		<view class="body_bottom">
			<view class="body_bottom_top">
				<image class="img_left" src="../../../static/jingyou/voice.png" mode="" @tap="showInputOr"></image>
				<view class="inputContent" :class="{inputContent2:!isInput}">
					<input v-if="showInput" type="text" value="" v-model="newsText" />
					<view v-else class="longtapAudio">按住说话</view>
				</view>
				<image src="../../../static/jingyou/expression.png" mode=""></image>
				<image class="img_right" src="../../../static/jingyou/imagetext.png" mode="" @tap="toggleInputBox"></image>
				<view class="state1" @tap="onSendMsg">发送</view>
			</view>


			<!-- 聊天弹出框 -->
			<view class="chat-input-box" v-if="!toggleInput">
				<view class="chat-input-content">
					<view @tap="chatSet" class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/chatSet.png"></image>
						</view>
						<text>设置</text>
					</view>
					<view @tap="selectImg" class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/pictubiao.png"></image>
						</view>
						<text>相册</text>
					</view>
					<view class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/sharetubiao.png"></image>
						</view>
						<text>分享</text>
					</view>
					<view class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/collectiontubiao.png"></image>
						</view>
						<text>收藏</text>
					</view>
					<view @tap="selectFriend" class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/friendtubiao.png"></image>
						</view>
						<text>名片</text>
					</view>
					<view class="chat-input-item">
						<view>
							<image src="../../../static/jingyou/locationtubiao.png"></image>
						</view>
						<text>位置</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {},
				showInput: true,
				toggleInput : true
			};

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// 			console.log(option.item); //打印出上个页面传递的参数。
			// 			console.log(option.identifier); //打印出上个页面传递的参数。
			this.option = option
			console.log(option.groupid); //打印出上个页面传递的参数。
			console.log(option.groupname);
		},
		methods: {
			back() {
				uni.navigateTo({
					url: "/pages/Friend/friend"
				})
			},
			showInputOr() { //显示输入框还是按住录音
				this.showInput = !this.showInput
			},
			toggleInputBox() {
				this.isDJ=!this.isDJ
				// this.getLastC2CHistoryMsgs()
				if (this.toggleInput) {
					this.toggleInput = false;
				} else {
					this.toggleInput = true;
				}
			},

		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 150upx;
		display: flex;
		justify-content: space-around;
		padding-right: 24upx;
	}

	.head_right image {
		width: 36upx;
		height: 36upx;
		padding-top: 68upx;
	}

	.time {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		padding: 40upx 0;
	}

	.otherTalk {
		display: flex;
		padding: 0 24upx;
	}

	.meTalk {
		display: flex;
		flex-direction: row-reverse;
		padding: 0 24upx;
	}

	.otherTalk .head_box {
		position: relative;
		margin-right: 30upx;
	}

	.meTalk .headImg {
		margin-left: 30upx;
	}

	.headImg {
		width: 84upx;
		height: 84upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.sendImg-me {
		max-width: 320upx;
		max-height: 320upx;
		border-radius: 10upx;
	}

	.country {
		width: 28upx;
		height: 28upx;
		position: absolute;
		top: 60upx;
		left: 0;
	}

	.item_box1 {
		background: #FFFFFF;
		border: #E6E6E6;
		border-radius: 10upx;
		position: relative;
		padding: 25upx 33upx;
		margin-bottom: 45upx;

	}

	.duration {
		color: rgba(153, 153, 153, 1);
		font-size: 28upx;
		margin-top: 30upx;
		margin-left: 15upx;
	}

	.duration.active {
		margin-right: 15upx;
		margin-left: 0;
	}

	.item_box1 .xiaojiao {
		width: 14upx;
		height: 34upx;
		position: absolute;
		left: -12upx;
		top: 8upx;
	}

	.voice-size {
		width: 26upx;
		height: 36upx;
	}

	.unread {
		width: 15upx;
		height: 15upx;
		background: rgba(230, 0, 0, 1);
		border: 1upx solid rgba(255, 255, 255, 1);
		border-radius: 50%;
		position: absolute;
		top: -5upx;
		right: -15upx;

	}

	.voice-size.active {
		transform: rotate(180deg);
	}

	.item_box2 {
		background: #47CECF;
		border: #E6E6E6;
		border-radius: 10upx;
		position: relative;
		padding: 25upx 33upx;
		margin-bottom: 45upx;
	}

	.item_box2 .xiaojiao {
		width: 14upx;
		height: 34upx;
		position: absolute;
		right: -12upx;
		top: 8upx;
	}

	.otherTalk .talk_item {
		color: #333333;
		font-size: 28upx;
		padding: 0 30upx;
	}

	.meTalk .talk_item {
		color: #FFFFFF;
		font-size: 28upx;
	}

	.body_item {
		padding-top: 128upx;
		margin-bottom: 94upx;
	}

	.body_bottom {
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.body_bottom_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.body_bottom_top image {
		width: 56upx;
		height: 56upx;
	}

	.inputContent input {
		height: 56upx;
		width: 350upx;
		border: 1upx solid #E6E6E6;
	}

	.mingpian {
		display: flex;
		flex-direction: column;
	}

	.state1 {
		width: 100upx;
		height: 58upx;
		background: #46CECF;
		color: #FFFFFF;
		line-height: 58upx;
		text-align: center;
		font-size: 26upx;
		border-radius: 10upx;
	}

	.mingpian_top {
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #E6E6E6;
		margin-bottom: 16upx;
	}

	.mingpian image {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}

	.mingpian text {
		color: #333333;
		font-size: 28upx;
	}

	.item_box2 .mingpian text {
		color: #FFFFFF;
		font-size: 28upx;
	}

	.mingpian_bottom {
		color: #999999;
		font-size: 20upx;
	}

	.item_box2 .mingpian_bottom {
		color: #FFFFFF;
		font-size: 20upx;
	}

	.chat-input-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 70upx;
		padding-top: 40upx;
	}

	.chat-input-item {
		width: 100upx;
		height: 150upx;
		text-align: center;
		color: #979797;
		font-size: 30upx;
		margin-right: 70upx;
		margin-bottom: 50upx;
	}

	.chat-input-content .chat-input-item:nth-child(4n) {
		margin-right: 0;
	}

	.chat-input-item>view {
		height: 120upx;
	}

	.chat-input-item image {
		width: 100upx;
		height: 100upx;
	}

	.longtapAudio {
		width: 470upx;
		height: 56upx;
		border-radius: 30upx;
		line-height: 56upx;
		text-align: center;
		background: #F4FAFA;
		color: #9A9B9D;
		font-size: 30upx;
	}
</style>
